<template>
  <el-container>
    <el-header class="bg-lightgray" height="60px">
      <PageTitle :title="'应用服务管理'" :SecTitle="'应用服务管理'"></PageTitle>
    </el-header>
    <el-main style="padding: 20px 0">
      <el-row class="search">
        <el-col>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input
                v-model="formInline.user"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchInfo">筛选</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addTeam">添加</el-button>
            </el-form-item>
          </el-form>
          <!-- 添加 -->
          <el-dialog title="添加" :visible.sync="dialogVisible">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
            >
              <el-form-item label="服务名称：">
                <el-input
                  v-model="formLabelAlign.servicename"
                  placeholder="请输入名称"
                ></el-input>
              </el-form-item>
              <el-upload
                class="avatar-uploader"
                action="http://121.5.35.178:8081/admin/upload/image"
                :show-file-list="false"
                list-style="picture-card"
                :on-success="handleAvatarSuccess"
                :headers="{ token: 'token' }"
                name="image"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-form-item label="服务描述：">
                <el-input
                  v-model="formLabelAlign.servicedesc"
                  placeholder="请输入描述"
                ></el-input>
              </el-form-item>

              <el-form-item label="服务费用：">
                <el-input
                  v-model="formLabelAlign.servicecost"
                  placeholder="请输入费用"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务内容：">
                <el-input
                  type="textarea"
                  v-model="formLabelAlign.servicedesc"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>

              <el-form-item label="状态：">
                <el-radio-group v-model="formLabelAlign.servicestatus">
                  <el-radio label="启用" value="1"></el-radio>
                  <el-radio label="禁用" value="0"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addtrue" class="v-btn"
                  >确定</el-button
                >
                <el-button class="v-btn" @click="dialogVisible = false"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 编辑 -->
          <el-dialog title="编辑" :visible.sync="dialogVisible1">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="seeInfo"
            >
              <el-form-item label="服务名称：">
                <el-input
                  v-model="seeInfo.servicename"
                  placeholder="请输入名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务目标：">
                <el-upload
                  class="avatar-uploader"
                  action="http://121.5.35.178:8081/admin/upload/image"
                  :show-file-list="false"
                  list-style="picture-card"
                  :on-success="handleAvatarSuccess"
                  :headers="{ token: token }"
                  name="image"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-dialog :visible.sync="disabled">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
              <el-form-item label="服务描述：">
                <el-input
                  v-model="seeInfo.servicedesc"
                  placeholder="请输入描述"
                ></el-input>
              </el-form-item>

              <el-form-item label="服务费用：">
                <el-input
                  v-model="seeInfo.servicecost"
                  placeholder="请输入费用"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务内容：">
                <el-input
                  type="textarea"
                  v-model="seeInfo.servicedesc"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>

              <el-form-item label="状态：">
                <el-radio-group v-model="seeInfo.servicestatus">
                  <el-radio label="启用" value="1"></el-radio>
                  <el-radio label="禁用" value="0"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="editDatabtn" class="v-btn"
                  >确定</el-button
                >
                <el-button class="v-btn" @click="dialogVisible1 = false"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 查看 -->
          <el-dialog title="查看" :visible.sync="dialogVisible2">
            <el-descriptions title="自定义样式列表" :column="1" border>
              <el-descriptions-item
                label="应用服务名称"
                label-class-name="my-label"
                content-class-name="my-content"
                >{{ seeInfo.servicename }}</el-descriptions-item
              >
              <el-descriptions-item label="应用图标">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="seeInfo.serviceimg"
                ></el-image>
              </el-descriptions-item>

              <el-descriptions-item label="描述">
                {{ seeInfo.servicedesc }}
              </el-descriptions-item>

              <el-descriptions-item label="内容">
                {{ seeInfo.servicedesc }}
              </el-descriptions-item>
              <el-descriptions-item label="费用">
                {{ seeInfo.servicecost }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                {{ seeInfo.servicestatus }}
              </el-descriptions-item>
            </el-descriptions>
            <!-- 返回按钮 -->
            <el-button type="primary" @click="backbtn" class="v-btn"
              >返回</el-button
            >
          </el-dialog>
        </el-col>
      </el-row>
      <!-- 表单 -->
      <el-row class="table_data">
        <el-col :span="24">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              fixed
              prop="serviceName"
              label="应用服务器名称"
              width="160px"
            >
            </el-table-column>
            <el-table-column prop="serviceImage" label="应用图标" width="140px">
              <template slot-scope="scope">
                <el-image
                  shape="square"
                  :size="10"
                  :src="scope.row.serviceImage"
                  style="width: 50px; height: 50px"
                ></el-image>
              </template>
            </el-table-column>

            <el-table-column prop="serviceDesc" label="描述" width="500px">
            </el-table-column>
            <el-table-column prop="serviceCost" label="费用"> </el-table-column>

            <el-table-column prop="serviceUsestatus" label="状态" width="80px">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220px">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.$index, scope.row)"
                  size="mini"
                  >查看</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-main>
    <el-main style="padding: 20px 0">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
    </el-main>
  </el-container>
</template>

<script>
import Paging from "../../components/paging/paging.vue";
import PageTitle from "../../components/common/title.vue";
// var token = sessionStorage.getItem('token')
export default {
  data() {
    return {
      id: 1,
      imageUrl: "",
      cover1: "",
      //搜索
      formInline: {
        user: "",
        region: "",
      },
      //编辑表单的数据
      exitInfo: {
        serviceName: "",
        serviceCost: "",
        serviceDesc: "",
        // serviceId: 0,
        servicestatus: "",
      },
      //查看表单的数据
      seeInfo: {
        servicename: "",
        servicecost: "",
        servicedesc: "",
        // serviceId: 0,
        serviceimg: "",
        servicestatus: "",
      },
      currentPage: 1, //当前页数
      total: 20, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4, //有2，4，6，8，10可选
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      disabled: false,
      labelPosition: "top",
      //添加表单的数据
      formLabelAlign: {
        servicename: "",
        servicedesc: "",
        servicecost: "",
        serviceImage: "",
        serviceStatus: "",
      },
      tableData: [],
      formLabelWidth: "120px",
    };
  },
  components: {
    PageTitle,
    Paging,
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.showData(
      this.currentPage,
      this.pagesize,
      this.formInline.user,
      this.formInline.region
    );
  },
  methods: {
    //调用后台接口
    //添加接口
    async addData(
      serviceName,
      serviceDesc,
      serviceCost,
      serviceStatus,
      serviceImage
    ) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/Services/add",
        data: {
          serviceName: serviceName,
          serviceCost: serviceCost,
          serviceDesc: serviceDesc,

          // serviceId: 0,
          serviceUsestatus: serviceStatus,
          serviceImage: serviceImage,
        },
      });
      if (res.code == 0) {
        this.showData(this.currentPage, this.pagesize);
      }
    },

    //获取数据接口
    async showData(page, pagesize, serviceName, serviceUsestatus) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/Services/findByWhere",
        data: {
          page: page,
          pageSize: pagesize,
          serviceName: serviceName,
          serviceUsestatus: serviceUsestatus,
        },
      });
      console.log(res);
      if (res.code == 0) {
        console.log("xxxxxxxxx", res);
        this.total = res.count;
        res.data.forEach((item) => {
          if (item.serviceUsestatus == "1") {
            item.serviceUsestatus = "启用";
          } else {
            item.serviceUsestatus = "禁用";
          }
        });
        this.tableData = res.data;
        console.log("sssssss", this.tableData);
      }
    },
    //第二种写法
    // showData(page, pagesize) {
    //   this.axios({
    //     method: "POST",
    //     url: "/Services/findAll",
    //     data: {
    //       page: page,
    //       pageSize: pagesize,
    //     },
    //     headers: {
    //       token: "123",
    //     },
    //   }).then((res) => {
    //     console.log(res);
    //     if (res.data.code == 0) {
    //       this.tableData = res.data.data;
    //       console.log(this.tableData);
    //     }
    //   });
    // },
    //查看接口
    async searchData(seeID) {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/Services/findById/" + seeID,
      });
      // console.log(res);
      if (res.code == 0) {
        this.seeInfo.servicename = res.data.serviceName;
        this.seeInfo.servicedesc = res.data.serviceDesc;
        this.seeInfo.servicecost = res.data.serviceCost;
        this.seeInfo.servicestatus = this.statusTransfer(
          res.data.serviceUsestatus,
          (this.seeInfo.serviceimg = res.data.serviceImage)
        );
      }
    },
    //删除接口
    async deleData(deleId) {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/Services/deleteById/" + deleId,
      });
      // console.log(res);
      if (res.code == 0) {
        this.showData(this.currentPage, this.pagesize);
      }
    },
    //编辑接口
    async editData(
      exitId,
      serviceName,
      serviceDesc,
      serviceCost,
      serviceImage,
      serviceUsestatus
    ) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/Services/update/",
        data: {
          serviceId: exitId,
          serviceName: serviceName,
          serviceDesc: serviceDesc,
          serviceCost: serviceCost,

          serviceImage: serviceImage,

          serviceUsestatus: serviceUsestatus,
          // serviceUsestatus: 0,
        },
      });
      console.log(res);
      if (res.code == 0) {
        this.showData(this.currentPage, this.pagesize);
      }
    },
    //查询函数
    searchInfo() {
      this.formInline.region = this.SecstatusTransfer(this.formInline.region);
      this.showData(
        this.currentPage,
        this.pagesize,
        this.formInline.user,
        this.formInline.region
      );
      console.log("状态", this.formInline.region);
      console.log(this.formInline.region);
      // console.log(this.formInline.)
    },
    //添加函数
    addTeam() {
      this.dialogVisible = true;
    },

    //状态转换:文字转数字
    SecstatusTransfer(statusTemp) {
      if (statusTemp == "禁用") {
        statusTemp = "0";
      } else if (statusTemp == "启用") {
        statusTemp = "1";
      }
      return statusTemp;
    },
    //状态转换:数字转文字
    statusTransfer(statusTemp) {
      if (statusTemp == "0") {
        statusTemp = "禁用";
      } else if (statusTemp == "1") {
        statusTemp = "启用";
      }
      return statusTemp;
    },
    //添加确定
    addtrue() {
      this.formLabelAlign.servicestatus = this.SecstatusTransfer(
        this.formLabelAlign.servicestatus
      );
      this.dialogVisible = false;
      this.addData(
        this.formLabelAlign.servicename,
        this.formLabelAlign.servicedesc,
        this.formLabelAlign.servicecost,
        this.formLabelAlign.servicestatus,
        this.cover1
      );
      this.showData(this.currentPage, this.pagesize);
    },
    //查看函数
    handleClick(index, row) {
      this.dialogVisible2 = true;
      this.searchData(row.serviceId);
      console.log(row);
      // console.log(row.serviceId)
    },
    //编辑函数
    handleEdit(index, row) {
      this.dialogVisible1 = true;
      this.id = row.serviceId;
      this.searchData(row.serviceId);
    },
    //编辑确定函数
    editDatabtn() {
      this.dialogVisible1 = false;
      this.seeInfo.servicestatus = this.SecstatusTransfer(
        this.seeInfo.servicestatus
      );
      this.editData(
        this.id,
        this.seeInfo.servicename,
        this.seeInfo.servicedesc,
        this.seeInfo.servicecost,
        this.cover1, 
        this.seeInfo.servicestatus
      );
    },
    //返回函数
    backbtn() {
      this.dialogVisible2 = false;
    },
    //删除函数
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warnning",
      })
        .then(() => {
          console.log(row);
          this.deleData(row.serviceId);
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      this.cover1 = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log("图片", this.cover1);
    },
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;

      this.showData(this.currentPage, this.pagesize);
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      this.showData(this.currentPage, this.pagesize);
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.v-btn {
  margin-left: 260px;
  color: black;
}
.table_data {
  border: 1px solid rgb(214, 199, 199);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* .my-label {
  background: #e1f3d8;
} */

/* .my-content {
  background: #fde2e2;
} */
</style>